<template>
  <div>
    <div class="shipin-box" v-if="video_list">
      <ul>
        <li v-for="(item,index) in video_list" v-bind:key="index">
          <div class="video-user-box">
            <div class="user-headimg">
              <img v-bind:src="item.p" alt="" />
            </div>
            <div class="user-name">{{ item.n }}</div>
            <div class="user-lv">lv{{ item.lvl }}</div>
          </div>
          <div class="video-box">
            <router-link :to="{path:'/detail',query:{id:item.id}}">
            <video v-bind:src="item.vfurl"></video>
            <div class="v-play"></div></router-link>
          </div>
          <div class="video-food-data-box">
            <div class="shoucang-box">
              <div class="left-box">
                <div class="shoucang-user-imghead">
                  <img
                    v-bind:src="aaa.p"
                    alt=""
                    v-for="aaa in item.collect_users"
                    v-bind:key="aaa.id"
                  />
                </div>
                <div class="count-shoucang">
                  {{ item.collect_count_text }}
                </div>
              </div>
              <div class="right-box">
                <i class="iconfont icon-shoucang"></i>
              </div>
            </div>
            <div class="food-name">{{item.n}}</div>
          </div>
        </li>
      </ul>
    </div>
    <div v-else>
            <jia-zai></jia-zai>
    </div>
  </div>
</template>

<script>
import jiaZai from '@/components/jiazai.vue'
export default {
  components:{
    jiaZai
  },
  data() {
    return {
      video_list: [],
      isload:false
    };
  },
  methods: {
    getvedio() {
      let datas = JSON.parse(localStorage.getItem("shipin_list"));
      if (datas) {
        // this.video_list = datas.list;
        // console.log(this.video_list);
        var arr = [];
          for(var i = 0; i < datas.list.length;i++){
            if(datas.list[i].r){
              var obj = {};
              obj.r = datas.list[i].r;
              obj.ra = datas.list[i].r.a;
              obj.p = datas.list[i].r.a.p;
              // console.log(res.data.result.list[i].r.a.p,"ppp");
              obj.n = datas.list[i].r.a.n;
              obj.lvl = datas.list[i].r.a.lvl;
              obj.id = datas.list[i].r.id;
              obj.vfurl = datas.list[i].r.vfurl;
              obj.collect_users = datas.list[i].r.collect_users;
              obj.collect_count_text = datas.list[i].r.collect_count_text;
              arr.push(obj);
            }
            
          }
          this.video_list = arr;
        // console.log(this.video_list[0].r.a.n);
        this.isload =true;
      } else {
        let _this = this;
        let url = `https://apis.netstart.cn/douguo/home/videos/0/20`;
        let promise = axios.get(url);
        promise.then((res) => {
          console.log(res.data.result);
          localStorage.setItem("shipin_list", JSON.stringify(res.data.result));
          // _this.video_list = res.data.result.list;
          var arr = [];
          for(var i = 0; i < res.data.result.list.length;i++){
            if(res.data.result.list[i].r){
              var obj = {};
              obj.r = res.data.result.list[i].r;
              obj.ra = res.data.result.list[i].r.a;
              obj.p = res.data.result.list[i].r.a.p;
              console.log(res.data.result.list[i].r.a.p,"ppp");
              obj.n = res.data.result.list[i].r.a.n;
              obj.lvl = res.data.result.list[i].r.a.lvl;
              obj.id = res.data.result.list[i].r.id;
              obj.vfurl = res.data.result.list[i].r.vfurl;
              obj.collect_users = res.data.result.list[i].r.collect_users;
              obj.collect_count_text = res.data.result.list[i].r.collect_count_text;
              arr.push(obj);
            }
            
          }
          _this.video_list = arr;
        });
        this.isload = true;
      }
    },
  },
  created() {
    this.getvedio();
    window.scrollTo(0,0)
  },
};
</script>

<style lang="scss">
body {
  margin: 0;
  padding: 0;
//   overflow-x: hidden;
}
.shipin-box {
  margin-bottom: 55px;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      width: 100%;
      .video-user-box {
        width: 100%;
        display: flex;
        justify-content: start;
        padding: 0 10px;
        height: 30px;
        margin-bottom: 10px;
        box-sizing: border-box;
        .user-headimg {
          width: 30px;
          height: 30px;
          font-size: 0;
          img {
            // width: 100%;
            margin: 0;
            height: 30px;
            border-radius: 50%;
          }
        }
        .user-name {
          height: 30px;
          font-size: 14px;
          line-height: 30px;
          margin: 0 8px;
        }
        .user-lv {
          height: 30px;
          font-size: 12px;
          line-height: 30px;
          
          color: #bcaf70;
        }
      }
      .video-box {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        // height: 200px;

        video{
            width: 100%;
            // height: 200px;
        }
        .v-play{
          position: absolute;
          width: 30px;
          height: 30px;
          // background-color: red;
          right: 5px;
          bottom: 10px;
        }
        // a {
        //   display: block;
        //   text-decoration: none;

        // }
      }
      .video-food-data-box {
        padding: 0 10px;
        width: 100%;
        box-sizing: border-box;
        .shoucang-box {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .left-box {
            width: 70%;
            // background-color: red;
            display: flex;
            height: 30px;
            justify-content: start;
            .shoucang-user-imghead {
              // width: 70%;
              height: 30px;
              font-size: 0;
              margin-right: 5px;
              display: flex;

              img {
                width: 30px;
                height: 30px;
                padding: 1px;
                background-color: #f0f0f0;
                box-sizing: border-box;
                border-radius: 50%;
                margin-left: -12px;
                &:nth-of-type(1) {
                  margin: 0;
                }
              }
            }
            .count-shoucang {
              // width: 30%;
              height: 28px;
              font-size: 14px;
              line-height: 28px;
            }
          }
          .right-box {
            width: 30%;
            height: 30px;
            font-size: 0;
            text-align: right;
            i {
              height: 30px;
              font-size: 25px;
              line-height: 30px;
            }
          }
        }
        .food-name{
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            margin: 10px 0;
            font-weight: 600;
        }
      }
    }
  }
}
</style>